<template>
    <div>
        <el-row>
            <el-col :span="24">
                默认：
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="请选择日期">
                </el-date-picker>
                带快捷选项：
                <el-date-picker
                    v-model="value1"
                    type="date"
                    align="right"
                    placeholder="请选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                周：<el-date-picker v-model="value2" type="week" format="yyyy年WW周" placeholder="请选择周"></el-date-picker>
                月：<el-date-picker v-model="value2" type="month" placeholder="请选择月"></el-date-picker>
                年：<el-date-picker v-model="value2" type="year" placeholder="请选择年份"></el-date-picker>
                多个日期：<el-date-picker v-model="value3" type="dates" placeholder="请选择一个或者多个日期" @change="handleChange"></el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                默认：
                <el-date-picker
                    v-model="dateRangeValue1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleDateRangeChange"></el-date-picker>
            </el-col>
            <el-col :span="6">
                带快捷选项：
                <el-date-picker
                    type="daterange"
                    v-model="dateRangeValue1"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="dateRangeOptions">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="9">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy年MM月dd日"></el-date-picker>
                {{value1}}
            </el-col>
            <el-col :span="4">
                <el-date-picker
                    v-model="value2"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
                {{value2}}
            </el-col>
            <el-col :span="6">
                <el-date-picker
                    v-model="value1"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="timestamp"></el-date-picker>
                {{value1}}
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class DatePickerComponent extends Vue {
    name = '';
    value1 = "";
    value2 = "";
    value3 = "";
    dateRangeValue1 = "";
    pickerOptions = {
        disabledDate(time:Date){
            return time.getTime() > Date.now();
        },
        shortcuts:[
            {
                text:"今天",
                onClick(picker:any){
                    picker.$emit("pick",new Date())
                }
            },
            {
                text:"昨天",
                onClick(picker:any){
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit("pick",date);
                }
            },
            {
                text:"一周前",
                onClick (picker: any) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit("pick",date);
                }
            }
        ]
    };
    dateRangeOptions = {
        shortcuts: [
            {
                text:"最近一周",
                onClick(picker:any){
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit("pick",[start,end]);
                }
            },
            {
                text:"最近一个月",
                onClick (picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit("pick",[start,end]);
                }
            },
            {
                text:"最近三个月",
                onClick (picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit("pick",[start,end]);
                }
            }
        ]
    }

    handleChange(val:any){
        console.log(val);
        console.log(typeof val);
    }

    handleDateRangeChange(dateRange:any){
        dateRange.forEach((item:Date) =>{
            console.log(item.toDateString());
        })
    }
}
</script>

<style scoped>
.el-row{
    margin-top: 10px;
}
.el-col{
    text-align: left;
}
</style>
